<template>
  <div class="information-panel" v-if="flag === 'kf' && ubaOnOff === 'true'">
    <h2 class="title" :class="!showInformation ? 'hide' : ''" @click="showInfo">
      <span>{{$t('webchat.customerTrackBrowseRemark')}}</span>
      <i class="icon el-icon-arrow-down" v-show="!showInformation"></i>
      <i class="icon el-icon-arrow-up" v-show="showInformation"></i>
    </h2>
    <div class="information" v-show="showInformation">
      <track-info
        :userBehaviorVideoId="webchatData.userBehaviorVideoId || ''"
        :initUbaInfoList="ubaInfoList"
        @getVideos="getVideos"
        :tabType="tabType"
        :id="webchatData._id"
        :ubaSessionId="ubaSessionId">
      </track-info>
    </div>
    <track-video v-if="showVideo" @closeVideos="closeVideos"></track-video>
  </div>
</template>

<script>
  import trackVideo from './../../trackVideo/trackVideo.vue'
  import TrackInfo from './../../base/con-chat-info/TrackInfo'
  export default {
    name: 'trackBrowse',
    data () {
      return {
        flag: this.$store.getters.isEcommerce ? 'ecommerce' : 'kf',
        showInformation: false,
        ubaSessionId: '',
        ubaInfoList: {},
        showVideo: false,
        ubaOnOff: 'false'
      }
    },
    components: {
      trackVideo,
      TrackInfo
    },
    props: {
      webchatData: Object,
      chatInfo: Object
    },
    computed: {
      tabType () {
        let arr = this.$route.path.split('/')
        return arr[3]
      }
    },
    watch: {
      'chatInfo._id' () {
        this.showInformation = false
        this.ubaInfoList = {}
        this.ubaSessionId = ''
      }
    },
    methods: {
      showInfo () {
        this.showInformation = !this.showInformation
        if (this.showInformation) {
          let account = this.$store.state.session.account.account
          window._hmt && window._hmt.push(['_trackEvent', '在线咨询', 'PM-访客浏览轨迹', account])
          this.fetchData()
        }
      },
      fetchData () {
        this.ubaSessionId = ''    // 全局的ubaSessionId 初始化
        this.$store.dispatch('loadUbaInfo', {_id: this.webchatData._id, ubaSessionId: this.ubaSessionId, tabType: this.tabType}).then((sessionId) => {
          if (sessionId) {
            this.ubaSessionId = sessionId
            this.ubaInfoList = this.$store.state.webchat.ubaInfoList[sessionId]
          } else {
            this.ubaInfoList = {}
          }
        })
      },
      closeVideos () { // 关闭用户行为播放
        this.showVideo = false
      },
      getVideos () {  // 开启用户行为播放
        this.showVideo = true
      }
    },
    beforeMount () {
      this.$store.dispatch('getGlobalSetById', {}).then((resp) => {
        if (resp.success && resp.row) {
          this.ubaOnOff = resp.row.ubaOnOff
        }
      })
    }
  }
</script>

<style lang="stylus" scoped>
  @import "./../../../../../assets/common.styl"
  .information-panel
    padding-top 20px
    padding-left 20px
    padding-right 20px
    .title
      font-size 14px
      font-weight 600
      color $cf-gray3
      cursor pointer
      .icon
        margin-left 5px
        font-size 11px
        color $cf-level4
    .hide
      padding-bottom 20px
      border-bottom solid 1px #d9d9d9

  .information
    padding-top 8px
    padding-bottom: 20px;
    border-bottom: solid 1px #d9d9d9
  .information-none
    padding 0
    border none
</style>
